<template>
	<div class="role-container">
		<div class="datascreen-head">
			<el-row>
				<el-col :span="16">
					<span>角色及权限设置</span>
				</el-col>
				<el-col :span="8" style="text-align: right">
					<el-button size="small" @click="addRole" class="button_edit">
						<svg-icon icon-class="add-icon-1" class="m-r5" />新增角色
					</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="datascreen-content">
			<el-row>
				<el-col :span="24">
					<el-table
						:data="tableData"
						style="width: 100%"
						@selection-change="handleSelectionChange"
						:header-cell-style="headCellStyle"
						max-height="600"
						class="m-b20"
						ref="tableRef"
					>
						<el-table-column type="selection" width="55" align="center" />
						<el-table-column
							v-for="(item, index) in tableHead"
							:key="index"
							:property="item.propName"
							:label="item.title"
							align="center"
							show-overflow-tooltip
						>
							<template #default="scope">
								<span>
									{{ scope.row[item.propName] }}
								</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" fixed="right">
							<template #default="scope">
								<el-button
									size="small"
									@click="handleAuth(scope.row)"
									class="option-button button_cancel"
								>
									权限分配
								</el-button>
								<el-button size="small" @click="deleteRole(scope.row)" class="button_delete2">
									删除
								</el-button>
							</template>
						</el-table-column>
						<template #empty>
							<div
								style="line-height: 60px; color: #909399; text-align: center"
							>
								暂无数据
							</div>
						</template>
					</el-table>
					<el-pagination
						layout="total,sizes,prev, pager, next,jumper"
						:page-size="pageSetting.pageSize"
						:page-sizes="pageSetting.pageSizes"
						:total="pageSetting.total"
						:current-page="currentPage"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
					/>
				</el-col>
			</el-row>
		</div>
	</div>

	<addDialog ref="addDialogRef" @submit="submitSuccess"></addDialog>
	<authDialog ref="authDialogRef" @submit="submitSuccess"></authDialog>
</template>

<script setup>
import { ref } from "vue";
import {
	ElRow,
	ElCol,
	ElButton,
	ElTable,
	ElTableColumn,
	ElPagination,
	ElMessageBox,
	ElMessage,
} from "element-plus";
import AddDialog from "./components/addDialog.vue";
import AuthDialog from "./components/authDialog.vue";
// import systemApi from "../systemSetting.js";
import systemApi from "@/views/systemSetting/systemSetting"

// ---表头样式---
let headCellStyle = {
	padding: "15px 0px",
	background: "#F7F7FA",
};

// ---表格数据---
let tableHead = [
	{
		propName: "id",
		title: "序号",
	},
	{
		propName: "name",
		title: "角色名称",
	},
	{
		propName: "description",
		title: "角色描述",
	},
];
let tableData = ref([]);
let tableRef = ref(null);

// ---分页参数---
let pageSetting = ref({
	pageSize: 10,
	pageSizes: [10, 20, 30, 40, 50],
	total: 0,
	currentPage: 1,
});

// ----单选---
let handleSelectionChange = (selection) => {
	if (selection.length > 1) {
		tableRef.value.clearSelection();
		tableRef.value.toggleRowSelection(selection.pop(), true);
	}
};

// ---获取表格数据---
let getData = async () => {
	let res = await systemApi.role.getRolePage({
		pageNum: pageSetting.value.currentPage,
		pageSize: pageSetting.value.pageSize,
		param: {},
	});
	if (res) {
		let { totalSize, content } = res;
		tableData.value = content.map((item, index) => {
			return {
				id: index + 1,
				...item,
			};
		});
		pageSetting.value.total = totalSize;
	}
};
getData();

// ---分页改变---
let handleCurrentChange = (val) => {
	pageSetting.value.currentPage = val;
	getData();
};

let handleSizeChange = (val) => {
	pageSetting.value.pageSize = val;
	getData();
};

// ---角色新增---
let addDialogRef = ref(null);
let addRole = () => {
	addDialogRef.value.dialogVisible = true;
};

let submitSuccess = () => {
	getData();
};

// ---权限分配---
let authDialogRef = ref(null);
let handleAuth = async (row) => {
	let res = await systemApi.role.getPermissionAndRolePermission(row.roleId); // 获取权限
	let res2 = await systemApi.role.getCompanyPostMsg(row.roleId); // 获取岗位

	// console.log(res, "---权限---");
	// console.log(res2, "---岗位---");
	if (res.data && res2) {
		authDialogRef.value.treeData.tree1.data = res.data["menus"]; // 菜单权限配置
		// authDialogRef.value.treeData.tree2.data = []; // 数据范围
		// authDialogRef.value.treeData.tree3.data = []; // 功能权限
		authDialogRef.value.treeData.tree4.data = res2; // 岗位权限配置
		authDialogRef.value.roleId = row.roleId; // 角色id
		authDialogRef.value.dialogVisible = true;
	}
};

let deleteRole = (row) => {
  ElMessageBox.confirm("确认删除？", "提示", {
    confirmButtonText: "确认",
    confirmButtonClass: "button_view",
    cancelButtonText: "取消",
    cancelButtonClass: "button_cancel2",
    type: "warning",
    autofocus: false,
  })
    .then(async () => {
      let res = await systemApi.role.roleDelete(row.roleId);
      if (res) {
        submitSuccess();
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      }
    })
    .catch(() => {
      // ElMessage({
      // 	type: "info",
      // 	message: "取消操作",
      // });
    });
};
</script>

<style lang="scss" scoped>
.role-container {
	.datascreen-head {
		.el-row {
			.el-col {
				&:nth-child(1) {
					display: flex;
					align-items: center;
					span {
						font-size: 18px;
						font-family: SourceHanSansCN-Bold, SourceHanSansCN;
						font-weight: bold;
						color: #1a1a1a;
						line-height: 27px;
						border-left: 10px solid #fc7018;
						padding-left: 10px;
					}
				}
				// &:nth-child(2) {
				// 	.el-button {
				// 		background: #ffffff;
				// 		border: 1px solid #fc7018;
				// 		padding: 15px 15px;
				// 		span {
				// 			font-size: 14px;
				// 			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				// 			font-weight: 400;
				// 			color: #fc7018;
				// 		}
				// 		&:hover {
				// 			background: rgba(255, 123, 80);
				// 			color: #ffffff;
				// 		}
				// 	}
				// }
			}
		}
	}
	.datascreen-content {
		margin-top: 20px;
		:deep(.el-table) {
			.option-button {
				// background: #7d7d9a;
				// border: none;
				span {
					font-size: 14px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					// color: #ffffff;
				}
				// &:hover {
				// 	background: rgba(125, 125, 154, 0.8);
				// }
			}
			.el-table__header {
				.el-checkbox {
					display: none;
				}
			}
		}
	}
}
</style>
